<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>医院管理系统 - 首页</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0f2b48',    // 深蓝主色
            secondary: '#4CAF50',  // 辅助绿色
            accent: '#1b3b5c',     // 强调色
            light: '#e9f1f7',      // 浅色背景
            dark: '#0a1c2f',       // 深色背景
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-item {
        @apply flex items-center gap-3 px-4 py-2.5 rounded-lg transition-all duration-200;
      }
      .sidebar-item:hover {
        @apply bg-accent/80 translate-x-1;
      }
      .sidebar-item.active {
        @apply bg-accent font-medium;
      }
      .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-100 p-5 transition-all duration-300 hover:shadow-md;
      }
      .card-header {
        @apply flex justify-between items-center mb-4;
      }
      .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
      }
      .btn-primary {
        @apply bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary/50;
      }
      .btn-outline {
        @apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-200;
      }
    }
  </style>
</head>
<body class="bg-light font-sans p-6">
<!-- 统计卡片区域 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
  <div class="card">
    <div class="card-header">
      <h3 class="text-gray-700 font-medium">今日挂号</h3>
      <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
          <i class="fa fa-arrow-up mr-1"></i>12%
        </span>
    </div>
    <div class="flex items-end justify-between">
      <div>
        <p class="text-3xl font-bold text-gray-800">156</p>
        <p class="text-sm text-gray-500 mt-1">较昨日 <span class="text-green-500">+17</span></p>
      </div>
      <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
        <i class="fa fa-calendar-check-o text-xl"></i>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3 class="text-gray-700 font-medium">在线医生</h3>
      <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
          <i class="fa fa-arrow-up mr-1"></i>5%
        </span>
    </div>
    <div class="flex items-end justify-between">
      <div>
        <p class="text-3xl font-bold text-gray-800">42</p>
        <p class="text-sm text-gray-500 mt-1">共 120 位医生</p>
      </div>
      <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
        <i class="fa fa-user-md text-xl"></i>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3 class="text-gray-700 font-medium">空闲病床</h3>
      <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
          <i class="fa fa-arrow-down mr-1"></i>8%
        </span>
    </div>
    <div class="flex items-end justify-between">
      <div>
        <p class="text-3xl font-bold text-gray-800">89</p>
        <p class="text-sm text-gray-500 mt-1">共 320 张病床</p>
      </div>
      <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
        <i class="fa fa-bed text-xl"></i>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3 class="text-gray-700 font-medium">药品库存</h3>
      <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
          正常
        </span>
    </div>
    <div class="flex items-end justify-between">
      <div>
        <p class="text-3xl font-bold text-gray-800">85%</p>
        <p class="text-sm text-gray-500 mt-1">2 种药品即将过期</p>
      </div>
      <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
        <i class="fa fa-medkit text-xl"></i>
      </div>
    </div>
  </div>
</div>

<!-- 图表和表格区域 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
  <div class="card lg:col-span-2">
    <div class="card-header">
      <h3 class="text-gray-700 font-medium">挂号趋势</h3>
      <div class="flex gap-2">
        <button class="btn btn-outline text-xs">本周</button>
        <button class="btn btn-outline text-xs">本月</button>
        <button class="btn btn-outline text-xs bg-primary/10 text-primary">全年</button>
      </div>
    </div>
    <div class="h-80">
      <canvas id="registrationChart"></canvas>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3 class="text-gray-700 font-medium">科室挂号分布</h3>
      <button class="text-blue-500 text-sm hover:underline">查看全部</button>
    </div>
    <div class="h-80">
      <canvas id="departmentChart"></canvas>
    </div>
  </div>
</div>

<!-- 最新挂号和待处理任务 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <div class="card lg:col-span-2">
    <div class="card-header">
      <h3 class="text-gray-700 font-medium">最新挂号</h3>
      <button class="text-blue-500 text-sm hover:underline">查看全部</button>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead>
        <tr>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">患者姓名</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">科室</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">医生</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
          <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
        </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
        <tr>
          <td class="px-4 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                <i class="fa fa-user"></i>
              </div>
              <div class="ml-3">
                <div class="text-sm font-medium text-gray-900">张三</div>
                <div class="text-xs text-gray-500">ID: 10001</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">内科</td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">李四医生</td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">今天 09:30</td>
          <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                  待就诊
                </span>
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
            <button class="text-blue-500 hover:text-blue-700">详情</button>
          </td>
        </tr>
        <tr>
          <td class="px-4 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                <i class="fa fa-user"></i>
              </div>
              <div class="ml-3">
                <div class="text-sm font-medium text-gray-900">王五</div>
                <div class="text-xs text-gray-500">ID: 10002</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">外科</td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">赵六医生</td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">今天 10:15</td>
          <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                  待就诊
                </span>
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
            <button class="text-blue-500 hover:text-blue-700">详情</button>
          </td>
        </tr>
        <tr>
          <td class="px-4 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                <i class="fa fa-user"></i>
              </div>
              <div class="ml-3">
                <div class="text-sm font-medium text-gray-900">孙七</div>
                <div class="text-xs text-gray-500">ID: 10003</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">儿科</td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">周八医生</td>
          <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">今天 14:00</td>
          <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                  已预约
                </span>
          </td>
          <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
            <button class="text-blue-500 hover:text-blue-700">详情</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3 class="text-gray-700 font-medium">待处理任务</h3>
      <button class="text-blue-500 text-sm hover:underline">查看全部</button>
    </div>
    <div class="space-y-4">
      <div class="flex items-start p-3 border border-gray-100 rounded-lg hover:border-gray-200 transition-colors">
        <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center text-red-600 flex-shrink-0 mt-1">
          <i class="fa fa-exclamation-triangle"></i>
        </div>
        <div class="ml-3">
          <h4 class="text-sm font-medium text-gray-900">药品库存预警</h4>
          <p class="text-xs text-gray-500 mt-1">3种药品库存低于警戒线</p>
          <div class="mt-2 flex items-center">
            <span class="text-xs text-red-500">紧急</span>
            <span class="mx-2 text-gray-300">|</span>
            <span class="text-xs text-gray-500">10分钟前</span>
          </div>
        </div>
      </div>

      <div class="flex items-start p-3 border border-gray-100 rounded-lg hover:border-gray-200 transition-colors">
        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 flex-shrink-0 mt-1">
          <i class="fa fa-calendar"></i>
        </div>
        <div class="ml-3">
          <h4 class="text-sm font-medium text-gray-900">医生排班调整</h4>
          <p class="text-xs text-gray-500 mt-1">王医生下周一申请调休</p>
          <div class="mt-2 flex items-center">
            <span class="text-xs text-blue-500">中等</span>
            <span class="mx-2 text-gray-300">|</span>
            <span class="text-xs text-gray-500">2小时前</span>
          </div>
        </div>
      </div>

      <div class="flex items-start p-3 border border-gray-100 rounded-lg hover:border-gray-200 transition-colors">
        <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 flex-shrink-0 mt-1">
          <i class="fa fa-user-md"></i>
        </div>
        <div class="ml-3">
          <h4 class="text-sm font-medium text-gray-900">新医生入职</h4>
          <p class="text-xs text-gray-500 mt-1">陈医生入职手续待办理</p>
          <div class="mt-2 flex items-center">
            <span class="text-xs text-yellow-500">一般</span>
            <span class="mx-2 text-gray-300">|</span>
            <span class="text-xs text-gray-500">今天</span>
          </div>
        </div>
      </div>

      <div class="flex items-start p-3 border border-gray-100 rounded-lg hover:border-gray-200 transition-colors">
        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 flex-shrink-0 mt-1">
          <i class="fa fa-file-text-o"></i>
        </div>
        <div class="ml-3">
          <h4 class="text-sm font-medium text-gray-900">月度报表</h4>
          <p class="text-xs text-gray-500 mt-1">7月份医院运营报表待生成</p>
          <div class="mt-2 flex items-center">
            <span class="text-xs text-purple-500">一般</span>
            <span class="mx-2 text-gray-300">|</span>
            <span class="text-xs text-gray-500">明天截止</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // 初始化图表
  document.addEventListener('DOMContentLoaded', function() {
    // 挂号趋势图表
    const regCtx = document.getElementById('registrationChart').getContext('2d');
    new Chart(regCtx, {
      type: 'line',
      data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        datasets: [{
          label: '门诊挂号',
          data: [1200, 1900, 3000, 5000, 4000, 6000, 7000, 7500, 7200, 6800, 5500, 4800],
          borderColor: '#0f2b48',
          backgroundColor: 'rgba(15, 43, 72, 0.1)',
          tension: 0.3,
          fill: true
        }, {
          label: '急诊挂号',
          data: [500, 800, 1200, 1500, 1000, 1300, 1400, 1600, 1500, 1200, 900, 800],
          borderColor: '#4CAF50',
          backgroundColor: 'rgba(76, 175, 80, 0.1)',
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
          },
          tooltip: {
            mode: 'index',
            intersect: false
          }
        },
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // 科室分布图表
    const deptCtx = document.getElementById('departmentChart').getContext('2d');
    new Chart(deptCtx, {
      type: 'doughnut',
      data: {
        labels: ['内科', '外科', '儿科', '妇产科', '眼科', '其他'],
        datasets: [{
          data: [30, 25, 15, 12, 8, 10],
          backgroundColor: [
            '#0f2b48',
            '#1b3b5c',
            '#4CAF50',
            '#81C784',
            '#A5D6A7',
            '#E8F5E9'
          ],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom'
          }
        },
        cutout: '70%'
      }
    });
  });
</script>
</body>
</html>